<template>
	<view class="page">
		<view class="header">
			<view class="header-1">
				<u-icon name="arrow-leftward" color="323233" size="18" @click="toGoBack()" />
			</view>
			<view class="header-2">
				<image src="/static/logo.png"></image>
				教育培训系统
			</view>
			<view class="header-3"></view>
		</view>
		<view class="certWrap">
			<view class="certTips">
				<view class="certTipName">获取证书步骤说明</view>
				<view class="certTipList">
					<view class="certTipItem">
						<image src="/static/index/cuirle.png"></image>
						<text>恭喜完成以下教育培训~请先认真填写专题对应的证书邮寄地址，因填写错误导致收不到证书概不负责哦~</text>
					</view>
					<view class="certTipItem">
						<image src="/static/index/cuirle.png"></image>
						<text>请扫描付款二维码，支付邮寄运费；</text>
					</view>
					<view class="certTipItem">
						<image src="/static/index/cuirle.png"></image>
						<text>邮费支付成功后，请耐心等待工作人员审核，并请静候佳音~</text>
					</view>
				</view>	
			</view>
			<view class="certListBox">
				<view class="certListTit">可获取证书列表</view>
				<template v-if="tableData.length > 0">
					<view class="certLists">
						<view class="certListItem" v-for="(item, index) in tableData" :key="index" @click="certJump(item.id)">
							<image src="/static/index/tips.png"></image>
							<text>{{ item.name }}</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="noData">
						<image src="/static/index/noData.png" style="width: 80px; height: 80px;"></image>
						<view>暂无可获取证书</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import { getMySubjectList } from '@/api/cert'
	export default {
		data() {
			return {
				tableData: [],
				currentPage: 1,
				pageSize: 1000,
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			toGoBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList() {
				getMySubjectList({
					pageSize: this.pageSize,
					currentPage: this.currentPage,
				}).then(res => {
					if (res.code == 200) {
						let data = res.data.list;
						// certMark 0-未发放 1已发放
						this.tableData = data.filter(item => item.categoryId === '科普' && item.certMark == 0 && item.enabledMark == 30);
					}
				})
			},
			certJump(id) {
				uni.navigateTo({
					url: '/pages/cert/edit?id='+id
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F8FC;
	}
	.page {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		.header {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			display: flex;
			.header-1 {
				margin: 30rpx 0 0 38rpx;
				justify-content: center;
				align-items: center;
			}
			.header-2 {
				flex: 10;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 48rpx;
					height: 48rpx;
					margin-right: 16rpx;
				}
			}
			.header-3 {
				flex: 1;
			}
		}
	}
	.certTips {
		padding: 16px;
		padding-bottom: 6px;
		background: url('../../static/index/certBg.png') no-repeat scroll;
		background-size: cover;
	}
	.certWrap {
		margin: 16px;
	}
	.certTipName {
		font-size: 16px;
		color: #fff;
	}
	.certTipList {
		margin-top: 40px;
		font-size: 16px;
		color: #323233;
	}
	.certTipItem {
		display: flex;
		justify-content: center;
		align-items: baseline;
		margin-bottom: 20px;
	}
	.certTipItem > image {
		width: 12px;
		height: 12px;
	}
	.certTipItem > text {
		width: 98%;
		padding-left: 3%;
	}
	.certListTit {
		font-weight: 500;
		font-size: 14px;
		color: #323233;
		line-height: 20px;
	}
	.certListBox {
		margin-top: 24px;
	}
	.certListItem {
		height: 54px;
		margin-top: 16px;
		background-color: #FFFFFF;
		border-radius: 8px;
		display: flex;
    	align-items: center;
	}
	.certListItem > image {
		width: 30px;
		height: 30px;
		padding-left: 14px;
		padding-right: 8px;
	}
	.noData {
		width: 100%;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    height: 200px;
	    text-align: center;
	    margin-top: 20px;
	    background-color: #FFFFFF;
	    border-radius: 8px;
	}
	
	.noData > view {
	    margin-top: 10px;
	    color: #969799;
	    font-size: 14px;
	}
</style>
